<template>
  <div id="app">
    <div class="tabs">
      <div
        v-for="(tab, index) in tabs"
        :key="index"
        class="tab"
        :class="{ active: activeTab === index }"
        @click="switchTab(tab.path)"
      >
        <a :href="tab.path" class="tab-link">
          {{ tab.name }}
        </a>
      </div>
    </div>
    
    <router-view v-if="showMainContent"></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeTab: 0,
      tabs: [
        { name: '主页', path: '#/home' },
        { name: '设备分类', path: '#/type' },
        { name: '设备', path: '#/equip' },
		{ name: '课室', path: '#/class' },
		{ name: '设备基础', path: '#/basic' }
      ]
    };
  },
  computed: {
    showMainContent() {
      return this.$route.path !== '/';
    }
  },
  mounted() {
    // 初始化时切换到主页
    this.$router.push('/home');
  },
  methods: {
  switchTab(path) {
    this.$router.push(path);
    const index = this.tabs.findIndex(tab => tab.path === path);
    this.activeTab = index;
  }
  }
};
</script>

<style>
/* 保持之前的样式不变 */
#app {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

.tabs {
  width: 100%;
  display: flex;
  height: 50px;
  background-color: #333;
  justify-content: space-around;
  align-items: center;
}

.tab {
  flex: 1;
  text-align: center;
  position: relative;
}

.tab-link {
  display: block;
  color: white;
  text-decoration: none;
  padding: 15px 0;
  font-size: 16px;
  transition: all 0.3s ease;
}

.tab.active .tab-link {
  border-bottom: 2px solid #ff6600;
}

a.tab-link:hover {
  color: #ff6600;
}

.router-link-active {
  color: #ff6600 !important;
  font-weight: bold !important;
}
</style>